<template>
  <div class="home-block">
    <ul>
      <li v-for="list in navList" :key="list.id">
        <router-link :to="list.url"> {{ list.label }} </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data: function () {
      return {
      }
    },
    computed: {
      ...mapState({
        navList: function (state) {
          return state.homeIndex.navList
        }
      })
    }
  }
</script>

<style lang="stylus" scoped>
  .home-block {
    ul>li {
      background-color: #42b983;
      display: inline-block;
      width: 150px;
      height: 160px;
      line-height: 160px;
      border-radius: 2px;
      margin: 35px;
      &:hover {
        box-shadow: 0 0 5px #42b983;
      }
      a {
        color: #fff !important;
        display: block;
      }
    }
  }
</style>